<template>
	<view class="page-box">
		<view class="centerY pad-30">
			<image class="avatar" src="@/static/image/icon10.png"></image>
			<view class="mar-left-30">
				<!-- <view class="centerY">
					<view class="font-36 color-text">小西瓜momo</view>
					<view class="aut centerXY">
						<image class="aut-icon" src="../../../static/image/aut.png"></image>
						<text class="mar-left-7">已实名</text>
					</view>
				</view> -->
				<view class="font-30 color-646464">{{userInfo.tel}}</view>
			</view>
		</view>

		<view class="pad-30">
			<view class="wallet pad-40">
				<view class="color-white">
					<view class="font-26">会员储值</view>
					<view class="font-40 mar-top-5 bold">{{balanceInfo.amount}}</view>
				</view>
				<!-- <view class="centerXY">
					<view class="btn font-26 bgWhite color-primary mar-right-10">充值</view>
					<view class="btn font-26 color-white">提现</view>
				</view> -->
			</view>
		</view>

		<view class="pad-30">
			<view class="bgWhite radius30">
				<up-cell icon="/static/image/my1.png" @click="hanldeBalance" :border="false" size="large" title="我的钱包"
					isLink>
				</up-cell>
				<up-cell icon="/static/image/my2.png" @click="hanldeCoupon" :border="false" size="large" title="我的优惠券"
					isLink>
				</up-cell>
				<up-cell icon="/static/image/city.png" @click="hanldeAddress" :border="false" size="18" title="常用地址"
					isLink>
				</up-cell>
				<up-cell icon="/static/image/my3.png" @click="hanldeUserSet" :border="false" size="large" title="个人设置"
					isLink>
				</up-cell>
			</view>
		</view>
	</view>

	<suspend icon="/static/image/service.jpg"></suspend>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow
	} from '@dcloudio/uni-app'

	import {
		getBaseInfo,
		balanceDetail
	} from '@/api/index.js'
	
	const hanldeCoupon = () => {
		uni.navigateTo({
			url: '/pages/my_actions/coupon/coupon'
		})
	}

	const hanldeUserSet = () => {
		uni.navigateTo({
			url: '/pages/my_actions/userSet/userSet'
		})
	}

	const hanldeBalance = () => {
		uni.navigateTo({
			url: '/pages/my_actions/balanceLog/balanceLog'
		})
	}

	// 获取用户信息
	const userInfo = ref({});
	const balanceInfo = ref({})
	const getUserInfo = () => {
		getBaseInfo().then(res => {
			userInfo.value = res.data.info;
		})

		balanceDetail().then(res => {
			balanceInfo.value = res.data.info;
		})
	}

	// 跳转常用地址
	const hanldeAddress = () => {
		uni.navigateTo({
			url: '/pages/address/list'
		})
	}

	onShow(() => {
		getUserInfo();
	})
</script>

<style lang="scss" scoped>
	.bgWhite {
		background: white;
	}

	.btn {
		width: 140rpx;
		height: 54rpx;
		border-radius: 50rpx;
		border: 1px solid #FFFFFF;
		line-height: 54rpx;
		text-align: center;
	}

	.wallet {
		background: url('https://file.yuanzhujiazheng.cn/upload/2024/09/26/85fcbc3e9b55a68f976efeb400407158.png');
		width: 100%;
		background-size: cover;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
	}

	.aut-icon {
		display: block;
		width: 32rpx;
		height: 26rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.aut {
		width: 140rpx;
		height: 50rpx;
		background: linear-gradient(135deg, #5F5F5F 0%, #161616 100%);
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		margin-left: 15rpx;
		font-size: 24rpx;
		color: #FCEEE1;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
</style>